<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>vue</title>
        <!-- 引入vue文件-->
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="vue"><!--起始位置右上角-->
			<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></></div>
		</div>
	</body>
	<script type="application/javascript">
		/*自定义全局指令*/
		Vue.directive('drag',function(el,binding){
			/*按下鼠标事件*/
			el.onmousedown=function(ev){//ev:鼠标点击位置对象,包含clientX ,clientY等信息
				//计算鼠标点击元素中的位置与元素左边与上边的距离
				var disX=ev.clientX-el.offsetLeft;/*offsetLeft,元素距离父元素左边的距离*/
				var disY=ev.clientY-el.offsetTop;
				/*鼠标移动事件,document表示当前页面任意移动*/
				document.onmousemove=function(ev){
					/*用鼠标移动到的距离减去点击元素时距离元素左边与上边的距离,
					 * 重新设置元素的当前位置
					 * */
					var l=ev.clientX-disX;
					var r=ev.clientY-disY;
					el.style.left=l+'px';
					el.style.top=r+'px';
				};
				/*松开鼠标事件*/
				document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
			}
		})
		new Vue({
			el:'#vue',
			data:{
				message:'<h1>hello world!</h1>',
				color:'blue'
			}
		})
	</script>
</html>
